<template>
  <div class="preview-container">
    <el-dialog
      title="题目预览"
      :visible.sync="dialogVisible"
      width="900px"
      append-to-body
      @closed="showVideo = false"
      :before-close="closeDialog"
    >
      <el-card class="box-card" :body-style="{ padding: '0px 30px' }">
        <div slot="header" class="clearfix">
          <el-table :data="details" style="width: 100%">
            <el-table-column label="题型">
              <template v-slot="{ row }">
                <span v-if="row.questionType === '1'">单选题</span>
                <span v-else-if="row.questionType === '2'">多选题</span>
                <span v-else>简答题</span>
              </template>
            </el-table-column>
            <el-table-column prop="id" label="编号"></el-table-column>
            <el-table-column label="难度">
              <template v-slot="{ row }">
                <span v-if="row.difficulty === '1'">简单</span>
                <span v-else-if="row.difficulty === '2'">一般</span>
                <span v-else>困难</span>
              </template>
            </el-table-column>
            <el-table-column prop="tags" label="标签"></el-table-column>
            <el-table-column prop="subjectName" label="学科"></el-table-column>
            <el-table-column
              prop="directoryName"
              label="目录"
            ></el-table-column>
            <el-table-column prop="direction" label="方向"></el-table-column>
          </el-table>
        </div>
        <div class="options bottom">
          <h4>题干:</h4>
          <div v-html="details[0].question" class="question"></div>
          <p v-if="details[0].questionType === '3'">简答题答案</p>
          <p v-else>
            <span v-if="details[0].questionType === '1'">单选题</span>
            <span v-else-if="details[0].questionType === '2'">多选题</span>
            <span v-else>简答题</span> 选项：
            <span
              v-if="
                details[0].questionType === '1' ||
                details[0].questionType === '2'
              "
              >（以下选中的选项为正确答案）</span
            >
          </p>
          <div class="radios" v-if="details[0].questionType === '1'">
            <el-radio
              v-for="item in details[0].options"
              :key="item.id"
              :label="1"
              :value="item.isRight"
              >{{ item.title }}</el-radio
            >
          </div>
          <div class="checkboxes" v-else-if="details[0].questionType === '2'">
            <el-checkbox
              v-for="item in details[0].options"
              :key="item.id"
              :value="item.isRight === 1 ? true : false"
              >{{ item.title }}</el-checkbox
            >
          </div>
        </div>
        <div class="answer bottom top">
          <h4>
            参考答案:
            <el-button type="danger" size="small" @click="video"
              >视频答案预览</el-button
            >
          </h4>
          <div class="video" v-show="showVideo">
            <video controls :src="details[0].videoURL" ref="video">
              您的浏览器不支持 video 标签
            </video>
          </div>
        </div>
        <div class="expalation bottom top">
          <h4>
            答案解析:
            <span v-if="details[0].answerID">{{ details[0].answerID }}</span>
            <span v-else>无</span>
          </h4>
        </div>
        <div class="remarks bottom top">
          <h4>
            题目备注:
            <span v-if="details[0].remarks">{{ details[0].remarks }}</span>
            <span v-else>无</span>
          </h4>
        </div>
      </el-card>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="closeDialog">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    details: {
      type: Array,
      default: () => []
    },
    dialogVisible: {
      type: Boolean
    }
  },
  // emits: ['update:dialogVisible'],
  data () {
    return {
      // dialogVisible: false,
      showVideo: false
    }
  },
  methods: {
    video () {
      if (this.details[0].videoURL) {
        this.showVideo = true
        this.$nextTick(() => {
          this.$refs.video.play()
        })
      } else {
        this.showVideo = false
      }
    },
    closeDialog () {
      this.$emit('update:dialogVisible', false)
      this.$refs.video.pause()
    }
  }
}
</script>

<style scoped lang='less'>
.question {
  color: #589ff8;
  font-size: 16px;
  font-weight: bold;
}

.bottom {
  margin-bottom: 20px;
}
.top {
  border-top: 1px solid #ebeef5;
}
.video {
  width: 400px;
}
.video video {
  width: 100%;
}
</style>
